<template>
  <el-card class="user-card" shadow="hover" :body-style="{ padding: '20px' }">
    <div class="user-content">
      <!-- 用户头像 -->
      <div class="user-avatar">
        <el-avatar
          :src="getImageUrl(user.avatar)"
          :size="60"
          class="avatar"
          @click="handleUserClick"
        >
          <IconifyIconOnline icon="ep:user" />
        </el-avatar>
      </div>

      <!-- 用户信息 -->
      <div class="user-info">
        <h4 class="user-name" @click="handleUserClick">
          {{ user.nickname || user.username }}
        </h4>

        <p v-if="user.description" class="user-description">
          {{ user.description }}
        </p>

        <!-- 用户统计 -->
        <div class="user-stats">
          <span v-if="user.articleCount !== undefined" class="stat-item">
            <IconifyIconOnline icon="ep:document" />
            {{ user.articleCount }} 文章
          </span>
          <span
            v-if="'followerCount' in user && user.followerCount !== undefined"
            class="stat-item"
          >
            <IconifyIconOnline icon="ep:user" />
            {{ formatNumber(user.followerCount) }} 粉丝
          </span>
          <span
            v-if="'followingCount' in user && user.followingCount !== undefined"
            class="stat-item"
          >
            <IconifyIconOnline icon="ep:user-filled" />
            {{ formatNumber(user.followingCount) }} 关注
          </span>
        </div>

        <!-- 交互时间 -->
        <div v-if="interactionTime" class="interaction-info">
          <span class="interaction-text">
            {{ interactionType }}于 {{ formatTime(interactionTime) }}
          </span>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="user-actions">
        <el-button
          v-if="showFollowButton"
          type="primary"
          size="small"
          :loading="followLoading"
          @click="handleFollow"
        >
          {{ isFollowing ? "已关注" : "关注" }}
        </el-button>

        <el-button size="small" @click="handleUserClick"> 查看主页 </el-button>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { IconifyIconOnline } from "@/components/ReIcon";
import { useUserAuthStore } from "@/store/modules/userAuth";
import type { FollowingUser, FollowerUser } from "@/types/user-interactions";
import { followUserApi, formatNumber, formatTime } from "@/api/user-profile";

interface Props {
  user: FollowingUser | FollowerUser;
  interactionTime?: string;
  interactionType?: string;
  showFollowButton?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  interactionTime: "",
  interactionType: "",
  showFollowButton: true
});

const router = useRouter();
const userAuthStore = useUserAuthStore();

// 响应式数据
const followLoading = ref(false);
const isFollowing = ref(false); // 实际应该从用户状态或者API获取

// 计算属性
const currentUserId = computed(() => {
  return userAuthStore.userId || 1; // 从 store 中获取当前用户ID
});

// 方法
const getImageUrl = (url: string): string => {
  if (!url) return "";
  if (url.startsWith("http")) return url;
  return `${import.meta.env.VITE_BASE_API || ""}${url}`;
};

const handleUserClick = () => {
  router.push(`/user/${props.user.userId}/profile`);
};

const handleFollow = async () => {
  if (followLoading.value) return;

  try {
    followLoading.value = true;

    const response = await followUserApi({
      userId: props.user.userId,
      isFollow: !isFollowing.value
    });

    if (response?.code === 200) {
      isFollowing.value = !isFollowing.value;
      ElMessage.success(isFollowing.value ? "关注成功" : "取消关注成功");
    } else {
      ElMessage.error(response?.message || "操作失败");
    }
  } catch (error) {
    console.error("关注操作失败:", error);
    ElMessage.error("操作失败，请稍后重试");
  } finally {
    followLoading.value = false;
  }
};
</script>

<style scoped lang="scss">
// 暗色主题适配
@media (prefers-color-scheme: dark) {
  .user-card {
    .user-content {
      .user-avatar {
        .avatar {
          border: 2px solid var(--el-border-color-light);
        }
      }
    }
  }
}

.user-card {
  height: 100%;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 12px 32px rgb(0 0 0 / 12%);
    transform: translateY(-4px);
  }

  .user-content {
    display: flex;
    flex-direction: column;
    height: 100%;

    .user-avatar {
      display: flex;
      justify-content: center;
      margin-bottom: 16px;

      .avatar {
        cursor: pointer;
        transition: transform 0.3s ease;

        &:hover {
          transform: scale(1.1);
        }
      }
    }

    .user-info {
      flex: 1;
      text-align: center;

      .user-name {
        margin: 0 0 8px;
        font-size: 16px;
        font-weight: 600;
        color: var(--el-text-color-primary);
        cursor: pointer;
        transition: color 0.3s ease;

        &:hover {
          color: var(--el-color-primary);
        }
      }

      .user-description {
        // 内容截断
        display: -webkit-box;
        margin: 0 0 12px;
        overflow: hidden;
        -webkit-line-clamp: 2;
        font-size: 14px;
        line-height: 1.5;
        color: var(--el-text-color-regular);
        -webkit-box-orient: vertical;
      }

      .user-stats {
        display: flex;
        gap: 16px;
        justify-content: center;
        margin-bottom: 12px;

        @media (width <= 480px) {
          flex-direction: column;
          gap: 8px;
        }

        .stat-item {
          display: flex;
          gap: 4px;
          align-items: center;
          font-size: 13px;
          color: var(--el-text-color-secondary);

          .iconify {
            font-size: 14px;
          }
        }
      }

      .interaction-info {
        margin-bottom: 16px;

        .interaction-text {
          font-size: 12px;
          color: var(--el-text-color-placeholder);
        }
      }
    }

    .user-actions {
      display: flex;
      gap: 8px;
      justify-content: center;

      @media (width <= 480px) {
        flex-direction: column;
      }

      .el-button {
        flex: 1;
        max-width: 100px;

        @media (width <= 480px) {
          max-width: none;
        }
      }
    }
  }
}
</style>
